<!-- 可编辑单元格组件《记账凭证》 -->
<template>
    <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
            <div v-if="col=='accountingName' || col=='crmName' || col=='phonetic' || col == 'vendorName'||col=='userName'||col=='projectName' || col == 'officeName'">
                <!-- 科目 -->
                <search-group-detail ref="searchComponents" :record="record" :inputValue="text" :componentName="componentName" @clickItem="searchBackData"></search-group-detail>
            </div>
            <div v-else-if="col=='beginAmountDirection' || col=='amountDirection'">
                <!--科目期初余额->期初金额方向1:借2:贷-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" style="width:100%;" ref="focusid">
                    <a-select-option value="1" label="借">
                        借
                    </a-select-option>
                    <a-select-option value="2" label="贷">
                        贷
                    </a-select-option>
                </a-select>
            </div>

            <div v-else-if="col=='debitAmount' || col=='creditAmount'" id="debitAmountId">
                <!-- <creadentials-money-input ref="debitAmountInput" :colType="col" @change="handleChange" :value="value" @check="check"></creadentials-money-input> -->
                <a-input style="text-align:right" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check"></a-input>
            </div>
            <div v-else-if="col=='beginAmount'">
                <div v-if="record.isEndNode === false" ref="focusid" style="text-align:right;padding-right:2px;"></div>
                <!-- <div ref="focusid" style="text-align:right;padding-right:2px;" v-else-if="value && value > 0 ">{{value | NumFormat}}</div> -->
                <a-input v-else :value="value" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check" />
            </div>
            <a-input v-else :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check" />
        </div>

        <div v-else class="editable-cell-text-wrapper" @click="edit">
            <div style="text-align:right;padding-right:2px;" v-if="!value && col=='beginAmount'">
                <!-- 辅助期初弹窗 -->
                <init-model ref="initModel" :record="record" @clickItem="handleRemarkChange"></init-model>
            </div>
            <div style="text-align:right;padding-right:2px;" v-else-if="(value && value >= 0) && col=='beginAmount'">
                {{value | NumFormat}}
                <!-- 辅助期初弹窗 -->
                <init-model ref="initModel" :record="record" @clickItem="handleRemarkChange"></init-model>
            </div>
            <div style="text-align:right;padding-right:2px;" v-else-if="(value && value >= 0) && col=='amount'">
                {{value | NumFormat}}
            </div>
            <div style="text-align:right;padding-right:2px;" v-else-if="(value && value >= 0) && col=='proportion'">
                {{ value }}%
            </div>
            <!--科目期初余额->期初金额方向1:借2:贷-->
            <div v-else-if="col=='beginAmountDirection' || col == 'amountDirection'">{{ value == 1?'借':value == 2?'贷':'' }}</div>
            <!--凭证模板->金额来源 -->
            <div v-else class="ellipsis-text">
                {{ value || '&nbsp;' }}
            </div>
        </div>
    </div>
</template>
<script>

import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail";  //静态表格明细搜索组
import creadentialsMoneyInput from "@/components/PopUpLayer/creadentialsMoneyInput";  //静态表格明细搜索组
import { remarkSave, remarkList, remarkRemove } from "@/api/finance/remark"
import getDate from "@/utils/tool/date";
import initModel from "@/views/finance/initialize/initModel" // 期初余额弹窗
export default {
    props: {
        text: {
            type: String,
            default: ''
        },
        col: {
            type: String,
            default: ''
        },
        record: {
            type: Object,
            default: () => { }
        },
        dataSource: {
            type: Array,
            default: () => []
        },
        clickName: {
            type: String,
            default: null
        }
    },
    components: {
        searchGroupDetail,
        creadentialsMoneyInput,
        initModel,
        VNodes: {
            functional: true,
            render: (h, ctx) => ctx.props.vnodes,
        },
    },
    data () {
        return {
            value: this.text,
            editable: false,
            beginAmountDirection: '',
            amountDirection: '',
            amountSource: '',
            accountingType: '',

            remarkData: [],//摘要
            remarkText: "",
        };
    },
    mounted () {

    },
    created () {

    },
    methods: {
        //==========================默认输入框==========================
        handleChange (e) {
            const value = e.target.value;
            this.value = value;
            console.log(value)
        },
        closeModel () {
            const closesModel = document.getElementById('closesModel');
            closesModel.addEventListener('click', (e) => {
                this.editable = false;
            }, false)
        },
        check () {
            this.editable = false;
            // if (this.col == 'debitAmount' || this.col == 'creditAmount') {
            //     if (this.value != null && this.vaule != 0) {
            //         let reg = /^([-+])?\d+(\.[0-9]{1,2})?$/;
            //         if (!reg.test(this.value)) {
            //             this.value = null;
            //             return
            //         }
            //     }
            // }
            console.log(this.value)
            this.$emit("change", this.value);
        },
        //==========================默认输入框==========================

        edit () {
            console.log(this.col, this.record, this.dataSource, this.clickName);

            if (this.col != 'remark') {
                this.editable = true;
            }

            if (this.col == 'accountingName') {
                //会计科目
                if (this.record.accountingType == 1) {
                    //科目来源是 单据上的科目
                    this.editable = false;
                } else {
                    this.componentName = 'accountingRadio';
                    this.$nextTick(() => {
                        this.$refs.searchComponents.showModal();
                    })
                }
            } else if (this.col == 'crmName' || (this.col == 'phonetic' && this.$route.path == '/finance/initialize/client')) {
                //客户
                this.componentName = 'crm';
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.col == 'vendorName' || (this.col == 'phonetic' && this.$route.path == '/finance/initialize/supplier')) {
                //供应商
                this.componentName = 'supplie';
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.col == 'userName') {
                //个人
                this.componentName = 'workerName';
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.col == 'projectName') {
                //项目
                this.componentName = 'project';
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.col == 'officeName') {
                //部门
                this.componentName = 'office';
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.col == 'auxiliaryItem') {
                //辅助项
                if (this.record.accountingId != null) {
                    this.editable = false;
                    setTimeout(() => {
                        this.$emit('showModalAuxiliary');
                    }, 200)
                } else {
                    this.editable = false;
                    return;
                }
            } else if (this.col == 'debitAmount' || this.col == 'creditAmount') {
                if (this.record.accountingId) {
                    this.$nextTick(() => {
                        this.editable = true;
                        if (this.col == 'debitAmount') {
                            this.value = this.record.debitAmount;
                        }

                        if (this.col == 'creditAmount') {
                            this.value = this.record.creditAmount;
                        }

                        this.$refs.focusid.focus();
                    });
                } else {
                    this.editable = false;
                    return;
                }
            } else if (this.col == "beginAmountDirection") {
                //期初金额方向
                if (this.record.crmId != null || this.record.vendorId != null || this.record.officeId != null || this.record.userId != null || this.record.projectId != null || this.record.accountingId) {
                    this.$nextTick(() => {
                        this.$refs.focusid.focus();
                    });
                } else {
                    this.editable = false;
                    return;
                }
            } else if (this.col == 'beginAmount') {
                //期初金额
                // if (this.record.crmId != null || this.record.vendorId != null || this.record.officeId != null || this.record.accountingId) {

                if (this.record.isEndNode && (this.record.isAuxaccCustomer || this.record.isAuxaccDepartment || this.record.isAuxaccPerson || this.record.isAuxaccProject || this.record.isAuxaccSupplier)) {
                    this.editable = false;
                    this.$refs.initModel.showModal();
                } else {
                    this.$nextTick(() => {
                        this.$refs.focusid.focus();
                    });
                }

            } else if (this.col == 'remark') {
                //摘要
                this.getRemarkData();
            }else {
                this.$nextTick(() => {
                    this.$refs.focusid.focus();
                    if (this.col == 'planDate') {
                        this.closeModel();
                    }
                });
            }
        },
        getRemarkData () {
            remarkList().then(res => {
                if (res.code === 200) {
                    this.remarkData = res.data;
                    this.editable = true;
                }
            })
        },
        handleRemarkChange (e) {
            console.log(e);
            this.value = e;
            this.$emit("change", this.value);
        },
        handleRemarkSearch (e) {
            this.remarkText = e;
        },
        handleRemarkBlur () {
            this.$emit("change", this.value);
        },
        handleRemarkRemove (item) {
            let that = this;
            this.$confirm({
                title: '提示',
                content: <div>是否确认删除摘要<div style="color:#f5222d">{item.content}</div></div>,
                onOk () {
                    let requestData = {
                        "id": item.id
                    }
                    remarkRemove(requestData).then(res => {
                        if (res.code === 200) {
                            that.$message.success('删除摘要成功');
                        }
                    })
                },
                onCancel () {

                },
            });
        },
        addRemarkItem () {
            //添加摘要
            console.log(this.remarkText)
            if (!this.remarkText || this.remarkText == null || this.remarkText == '') {
                this.$message.warning('请填写摘要内容');
                return;
            }
            let that = this;
            console.log(that.remarkText)
            let text = _.clone(that.remarkText)
            this.$confirm({
                title: '提示',
                content: <div>是否确认新增摘要<div style="color:#1890ff">{that.remarkText}</div></div>,
                onOk () {
                    let requestData = {
                        "content": text
                    }
                    remarkSave(requestData).then(res => {
                        if (res.code === 200) {
                            that.$message.success('新增摘要成功');
                            that.getRemarkData();
                        }
                    })
                },
                onCancel () {

                },
            });

        },
        searchBackData (record) {
            this.editable = false;
            if (record) {
                console.log(record.constructor, record)
                if (record.constructor === Object || record.constructor === Array) {
                    this.value = record.name;
                    this.$emit("change", record);
                }
            } else {
                this.$emit("change");
            }
        },
        handleSelectChange (value, label) {
            console.log(value, label, this.col);
            this.editable = false;
            if (this.col == 'beginAmountDirection') {
                this.beginAmountDirection = label.componentOptions.propsData.label;
            } else if (this.col == 'amountDirection') {
                this.amountDirection = label.componentOptions.propsData.label;
            } else if (this.col == 'amountSource') {
                this.amountSource = label.componentOptions.propsData.label;
            } else if (this.col == 'accountingType') {
                //科目来源
                this.accountingType = label.componentOptions.propsData.label;
            }
            this.value = label.componentOptions.propsData.label;
            this.$emit("change", value);
        },
        handleSelectBlur () {
            this.editable = false;
        },

        //==========================日期==========================
        onChangeTime (d, string) {
            this.value = string;
            let backData = {
                value: string,
                columnType: '日期'
            }
            this.editable = false;
            this.$emit("change", backData);
        },
        onOkTime () {
            this.value = getDate.getCurrentMoment().format('YYYY-MM-DD');
            let backData = {
                value: this.value,
                columnType: '日期'
            }
            this.editable = false;
            this.$emit("change", backData);
        },
        onBlurTime () {
            //移出日期组件
            // setTimeout(() => {
            //   this.editRequireDate = false;
            // }, 200)
        },
        //==========================日期==========================
    },
};
</script>
<style lang="less">
    .editable-cell {
        position: relative;
        height: 30px;
        line-height: 30px;
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
        .ant-input {
            height: 30px;
            text-align: left;
            font-size: 13px;
            padding: 0;
            border-radius: 0;
            border: 1px solid #000 !important;
        }
        .ant-select-selection--single {
            height: 28px !important;
        }
        .ant-select-selection {
            border: 1px solid #000 !important;
            border-radius: 0;
        }
    }

    .editable-cell-input-wrapper {
        padding: 0;
    }
    .editable-cell-text-wrapper {
        padding: 0;
        height: 100%;
        width: 100%;
        .body-box {
            display: flex;
            height: 100%;
            .body-item {
                flex: 1;
                min-width: 20px;
                border-right: 1px solid #cacaca;
                text-align: center;
            }
            .body-item:nth-child(2),
            .body-item:nth-child(5),
            .body-item:nth-child(8) {
                border-right: 1px solid #a3d9f8;
            }
            .body-item:nth-child(11) {
                border-right: 1px solid #eb9998;
            }
            .body-item:last-child {
                border-right: 0px solid #cacaca;
            }
        }
    }
    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        line-height: 18px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
        display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }

    .editable-cell-input-search {
        position: relative;
    }

    #closesModel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(255, 255, 255, 0);
    }
    .ant-select-selection-selected-value {
        .hover-red {
            display: none !important;
        }
    }
    .hover-red:hover {
        color: red;
    }
</style>